﻿define(function (require) {
    return Backbone.View.extend({
        //... is a list tag.
        tagName: "li",
        template: _.template($("#div_workitem").html()),
        events: {
            "click .rosy": "finish",
            "click .green": "finish",
            "click .blue": "confirm",
            "click .orange": "takeOwnerShip"
        },
        initialize: function () {
            var $self = this;
            $(this.el).attr('data-theme', 'C')
                      .addClass('ui-btn ui-btn-icon-right ui-li ui-btn-up-c');

            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
            this.model.view = this;
        },
        render: function () {
            $(this.el).html(this.template(this.model.toJSON()));

            return this;
        },
        ajaxLoad: function () {
            $(this.el).find('.command').hide();
            $(this.el).find('.img-ajax').show();
        },
        finish: function () {
            this.ajaxLoad();

            this.model.finish();
        },
        confirm: function () {
            this.ajaxLoad();

            this.model.confirm();
        },
        takeOwnerShip: function () {
            this.ajaxLoad();

            this.model.takeOwnerShip();
        },
        clear: function () {

        }
    });
});